<template>
    <div class="user-list-page">
        <!-- 工具栏 -->
        <div class="toolbar">
            <el-row>
                <el-col :xs="24" :sm="12" :md="8">
                    <el-input v-model="searchQuery" placeholder="请输入用户名/邮箱搜索" clearable class="search-input">
                        <template #prefix>
                            <el-icon>
                                <Search />
                            </el-icon>
                        </template>
                    </el-input>
                </el-col>

                <el-col :xs="24" :sm="12" :md="16" class="actions">
                    <el-button type="primary" @click="handleAddUser">添加用户</el-button>
                    <el-button @click="handleExport">导出</el-button>
                </el-col>
            </el-row>
        </div>

        <el-table :data="paginatedUsers" border stripe style="width: 100%">
            <el-table-column label="头像" align="center">
                <template #default="scope">
                    <el-avatar :src="scope.row.avatar" />
                </template>
            </el-table-column>
            <el-table-column prop="username" label="用户名" />
            <el-table-column prop="email" label="邮箱" />
            <el-table-column prop="role" label="角色" />
            <el-table-column prop="registerDate" label="注册时间" />
            <el-table-column prop="lastLoginDate" label="上次登录时间" />
            <el-table-column label="状态" align="center">
                <template #default="scope">
                    <el-tag :type="scope.row.status === 'active' ? 'success' : 'danger'">
                        {{ scope.row.status === 'active' ? '启用' : '禁用' }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="150">
                <template #default="scope">
                    <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
                    <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination v-model:current-page="currentPage" :page-size="pageSize" :total="filteredUsers.length" background
            layout="prev, pager, next, total" @current-change="handlePageChange" />

        <el-dialog v-model="dialogVisible" :title="dialogTitle" width="500px">
            <el-form :model="currentUser" label-width="100px">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="currentUser.username" placeholder="请输入用户名" />
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="currentUser.email" placeholder="请输入邮箱" />
                </el-form-item>
                <el-form-item label="角色">
                    <el-select v-model="currentUser.role" placeholder="请选择角色">
                        <el-option label="管理员" value="管理员" />
                        <el-option label="用户" value="用户" />
                    </el-select>
                </el-form-item>
                <el-form-item label="状态">
                    <el-radio-group v-model="currentUser.status">
                        <el-radio label="active">启用</el-radio>
                        <el-radio label="inactive">禁用</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="handleSaveUser">保存</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script setup>
import { onMounted, ref, computed } from 'vue';

const searchQuery = ref('');
const currentPage = ref(1);
const pageSize = ref(10);
const dialogVisible = ref(false);
const dialogTitle = ref('');

const users = ref([
]);

const currentUser = ref({
    id: null,
    username: '',
    email: '',
    role: '',
    status: '',
    avatar: '/path/to/default-avatar.jpg',
    registerDate: '',
    lastLoginDate: ''
});

const fetchUserListData = () => {
    const data = [
        {
            id: 1, username: 'John Doe', email: 'john@example.com', role: '管理员', status: 'active', avatar: '/path/to/avatar1.jpg', registerDate: '2023-01-15',
            lastLoginDate: '2023-11-19 10:23',
        },
        {
            id: 2, username: 'Jane Smith', email: 'jane@example.com', role: '用户', status: 'inactive', avatar: '/path/to/avatar2.jpg', registerDate: '2022-10-10',
            lastLoginDate: '2023-11-18 15:45',
        },
    ]
    users.value = data;
}


const filteredUsers = computed(() => {
    const query = searchQuery.value.trim().toLowerCase();
    return users.value.filter(
        user =>
            user.username.toLowerCase().includes(query) ||
            user.email.toLowerCase().includes(query)
    );
});

const paginatedUsers = computed(() => {
    const start = (currentPage.value - 1) * pageSize.value;
    const end = start + pageSize.value;
    return filteredUsers.value.slice(start, end);
});


const handleAddUser = () => {
    console.log('添加用户');
    dialogTitle.value = '添加用户';
    dialogVisible.value = true;
    currentUser.value = {
        id: null,
        username: '',
        email: '',
        role: '',
        status: 'active',
        avatar: '/path/to/default-avatar.jpg',
    };
}

const handleEdit = user => {
    dialogTitle.value = '编辑用户';
    currentUser.value = { ...user };
    dialogVisible.value = true;
};

const handleSaveUser = () => {
    if (currentUser.value.id) {
        const index = users.value.findIndex(user => user.id === currentUser.value.id);
        if (index !== -1) users.value[index] = { ...currentUser.value };
        //模拟修改请求
    } else {
        currentUser.value.id = Date.now();
        users.value.push({ ...currentUser.value });
        //模拟添加请求
    }
    dialogVisible.value = false;
};

const handleDelete = user => {
    users.value = users.value.filter(u => u.id !== user.id);
    //模拟删除请求
};

const handleExport = () => {
    console.log('导出用户数据', users.value);
};

const handlePageChange = page => (currentPage.value = page);

onMounted(() => {
    fetchUserListData();
});
</script>
<style lang="scss" scoped>
.user-list-page {
    padding: 20px;

    .toolbar {
        margin-bottom: 20px;

        .search-input {
            width: 100%;
        }

        .actions {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
        }
    }

    .el-table {
        margin-bottom: 20px;
    }


}
</style>
